<template>
  <el-container id="box">
    <el-aside width="20rem">
      <div class="systemName">查分后台管理系统</div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        router
      >
        <el-menu-item
          v-for="item in menuList"
          @click="handleRoute(item.url)"
          :index="item.url"
        >
          <el-icon>
            <i class="iconfont" :class="item.icon"></i>
          </el-icon>
          <span>{{ item.lable }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>{{ store.systemName }}</el-header>
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import useBatchStore from '@/store/batchStore';
const route = useRoute();
const store = useBatchStore();
const activeIndex = ref('/');
const menuList = ref([
  {
    lable: '账号管理',
    url: '/acountManage',
    icon: 'icon-ziyuan',
  },
  {
    lable: '考号管理',
    url: '/examManage',
    icon: 'icon-xuesheng',
  },
  {
    lable: 'VIP管理',
    url: '/vipManage',
    icon: 'icon-vip',
  },
  {
    lable: '批次管理',
    url: '/batchManage',
    icon: 'icon-kaoshi',
  },
  {
    lable: '商品管理',
    url: '/goodsManage',
    icon: 'icon-shangpin',
  },
  {
    lable: '订单管理',
    url: '/orderManage',
    icon: 'icon-dingdan',
  },
  {
    lable: '留言管理',
    url: '/messageManage',
    icon: 'icon-liuyan',
  },
  {
    lable: '缓存管理',
    url: '/cacheManage',
    icon: 'icon-qinglihuancun',
  },
]);

const handleRoute = (url) => {
  //   console.log(url);
};

onMounted(() => {
  if (store.batchList.length == 0) {
    store.getBatchListAjax();
  }
});

watch(
  () => route.path,
  (val) => {
    activeIndex.value = val;
  },
  {
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
#box {
  height: 100% !important;
}

:deep(.el-header) {
  height: 6rem;
  line-height: 6rem;
  min-height: 45px;
  font-size: 1.8rem;
  font-weight: bold;
  border-bottom: solid 1px var(--el-menu-border-color);
}

:deep(.el-aside) {
  height: 100%;

  .systemName {
    height: 6rem;
    line-height: 6rem;
    text-align: center;
    font-size: 2rem;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #476fff;
    border-right: solid 1px var(--el-menu-border-color);
  }

  .el-menu {
    height: calc(100% - 6rem);
    overflow: auto;

    .el-menu-item {
      padding-left: 3rem !important;
    }
  }
}

:deep(.el-main) {
  background-color: #f7f7f7;
  overflow: auto;
  padding: 1rem;
}

.el-container.is-vertical {
  background-color: #f7f7f7;
}

@import '@/assets/css/mycss.css';
</style>
